Skip to content

feat(workspace): Storybook tokens for rehearsal components - #897

Open
seonghobae wants to merge 48 commits into
developfrom
feat/workspace-storybook-tokens
Open

feat(workspace): Storybook tokens for rehearsal components#897
seonghobae wants to merge 48 commits into
developfrom
feat/workspace-storybook-tokens

Conversation

@seonghobae

@seonghobae seonghobae commented Aug 17, 2026

Copy link
Copy Markdown
Collaborator

Product outcome

Rehearsal workspace components have executable Storybook coverage and shared design tokens so design review exercises the same states a band sees. The shared overlap-warning component selects explicit dark/light surface contracts so clash guidance remains readable in both the dark rehearsal workspace and white Ranges cards.

Exact current identity

  • Protected target: develop@749511c3ad4000090048718f685c6bee6b3d2c25.
  • Exact current head: d43682078eb45383399550b9b64ce916047cb523.
  • Predecessor heads including 163c2e7b1ef26c037d9625054843ace2573baf55 and 027bd34734d8f24075e55c847ace7aa81a4a89fd and their checks are historical only.

Current exact scope

  • Storybook covers ConfidenceBadge, PracticeProgress, RehearsalCallout, RoleSwitcher, WorkspaceStates, SectionRoadmap, and OverlapWarningList.
  • OverlapWarningList is the shared clash list for Section Roadmap and Ranges; dark is the backward-compatible default and Ranges explicitly selects the light surface.
  • The light-surface contract was added test-first and uses shared tokens rather than feature-specific warning markup.
  • docs/doctoring/overlap-warning-surface-contrast.md records the WCAG 2.2 contrast decision with an APA 7 primary-standard reference and current live Figma node provenance.
  • The protected-base Workspace States, Pattern Backlog, and PR Review Rules governance sections that were accidentally dropped have been restored.
  • Ready workspace still names tonight's first playable range and the next instrument check.

Fresh Figma + Storybook design authority — 2026-08-28

Configured Figma file: https://www.figma.com/design/zthWmqfNKUgJBECvv002Qk

The live file was freshly read and repaired against this PR's executable Storybook/runtime contract. It now exposes page 45:86 (31 Component Contract Catalog) in addition to the cover. The restored authority includes:

  • shared BandScope Workspace Semantics variables derived from the exact runtime token values;
  • reusable ConfidenceBadge component set 254:72 with six Level=Low|Medium|High × Size=Compact|Default variants, matching Storybook's complete matrix and 22/26 px runtime height tokens;
  • reusable OverlapWarningItem component set 254:81 with Surface=Dark and Surface=Light variants;
  • contract frame 254:82 using instances of that same warning component in the dark rehearsal workspace (254:85) and white Ranges card (254:96), plus the intentional no-node NoClashes state (254:107);
  • exact runtime warning tokens: dark rgb(251 113 133 / 0.08) / rgb(253 164 175 / 0.2) / #FFE4E6, light #FFF1F2 / #FECDD3 / #9F1239.

Post-write screenshot inspection caught an overlapping component-master presentation defect; the Figma catalog was immediately repaired to render reviewable instance matrices while retaining the reusable component sets as masters. A second screenshot verifies the confidence matrix, both warning surfaces, and empty state without clipping or overlap.

Historical nodes such as 19:239 remain traceability only. Current design-review evidence is the page and component nodes above; Storybook remains the executable accessibility/interaction boundary and runtime CSS remains token authority.

Current evidence boundary

Exact current head d43682078eb45383399550b9b64ce916047cb523 is the only code/check evidence for this PR. Predecessor success is not transferred and this PR is not merge-authorized. Current review threads are resolved/outdated; submitted reviews are advisory/model commentary only, with no qualifying independent non-author exact-head approval.

Dependency / merge gate

…onents

Cite Figma 19-239 and docs/design-system/component-contract.md. Extract
OverlapWarningList for Section Roadmap and Ranges. Cover ConfidenceBadge,
PracticeProgress, RehearsalCallout, RoleSwitcher, WorkspaceStates, and
SectionRoadmap.
@cursor

cursor Bot commented Aug 17, 2026

Copy link
Copy Markdown

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

@coderabbitai

coderabbitai Bot commented Aug 17, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

Workspace 디자인 토큰과 컴포넌트 계약을 갱신했습니다. ConfidenceBadge의 크기와 색상 동작을 확장했습니다. OverlapWarningListRehearsalCallout을 추가했습니다. Ranges와 SectionRoadmap에 공유 경고 목록을 통합했습니다. Workspace Storybook 스토리와 검증 문서를 추가했습니다.

Changes

Workspace 컴포넌트와 디자인 토큰

Layer / File(s) Summary
디자인 토큰과 ConfidenceBadge 계약
apps/desktop/src/styles/workspace-tokens.css, apps/desktop/src/index.css, apps/desktop/src/features/workspace/ConfidenceBadge.*, docs/design-system/component-contract.md
전역 Workspace 토큰을 등록합니다. ConfidenceBadgecompactdefault 크기, 시맨틱 색상 토큰, 현지화된 title을 적용합니다. 관련 테스트와 Storybook 변형을 추가합니다.
공유 Workspace 컴포넌트
apps/desktop/src/features/workspace/OverlapWarningList.*, apps/desktop/src/features/workspace/RehearsalCallout.*, apps/desktop/src/styles/workspace-tokens.css, docs/doctoring/overlap-warning-surface-contrast.md
OverlapWarningList가 dark 및 light 표면을 지원하도록 변경합니다. RehearsalCallout은 선택적 콜백에 따라 액션 버튼을 활성화하거나 비활성화합니다. 두 컴포넌트의 테스트와 Storybook 상태를 추가합니다.
중복 경고 통합
apps/desktop/src/features/ranges/index.*, apps/desktop/src/features/workspace/SectionRoadmap.*
Ranges와 SectionRoadmap의 인라인 경고 렌더링을 OverlapWarningList 호출로 대체합니다. Ranges는 surface="light"를 전달합니다. formatChordEditLabel로 접근성 라벨의 플레이스홀더를 처리합니다.
Storybook과 Workspace 문서
apps/desktop/src/features/workspace/PracticeProgress.stories.tsx, apps/desktop/src/features/workspace/RoleSwitcher.stories.tsx, apps/desktop/src/features/workspace/WorkspaceStates.stories.tsx, AGENTS.md, ARCHITECTURE.md, CLAUDE.md, CHANGELOG.md, docs/design-system/component-contract.md
추가 Workspace 컴포넌트의 Storybook 상태를 등록합니다. Figma 참조, 컴포넌트 계약, 공유 범위와 변경 기록을 갱신합니다.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Merge Risk: 🔵 Low · up to 027bd

The change is mergeable with owner follow-up to unify the documented Figma component name, node mapping, and verification date so design evidence remains unambiguous; no runtime or security risk is identified.

Sequence Diagram(s)

sequenceDiagram
  participant Ranges
  participant SectionRoadmap
  participant OverlapWarningList
  Ranges->>OverlapWarningList: overlapWarnings와 surface="light" 전달
  SectionRoadmap->>OverlapWarningList: overlapWarnings 전달
  OverlapWarningList-->>Ranges: 표면별 경고 목록 렌더링
  OverlapWarningList-->>SectionRoadmap: 기본 dark 경고 목록 렌더링
Loading
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 6 functions across 14 files. (4 skipped: 4…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목은 rehearsal workspace 컴포넌트의 Storybook 스토리와 공유 디자인 토큰 추가라는 주요 변경을 명확하게 요약합니다.
Full details: Docstring Coverage

Explanation

Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 6 functions across 14 files. (4 skipped: 4 unsupported.)

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/workspace-storybook-tokens

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@opencode-agent opencode-agent Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

OpenCode cannot approve yet because required coverage evidence did not pass.

Review outcome

1. HIGH .github/workflows/opencode-review.yml:1 - Coverage evidence did not prove required test/docstring evidence

  • Problem: The required coverage-evidence job result was failure, so OpenCode cannot establish approval sufficiency for this head.

  • Root cause: Automated approval is only valid when the same-head coverage-evidence job proves supported repository test suites passed and configured docstring gates passed or were advisory, or reports not applicable because no supported source files or package manifests exist. Missing, failed, skipped, unavailable, or unsupported-tooling test evidence is a blocker.

  • Fix: Install or configure the repository test/docstring evidence tooling when source files or package manifests exist, rerun the current-head coverage-evidence job, and approve only after it reports success with required evidence or explicit no-source not-applicable evidence.

  • Regression test: Keep the approval branch checking needs.coverage-evidence.result == success before posting APPROVE, and publish REQUEST_CHANGES when coverage-evidence blocker states such as cancelled, skipped, failed, unsupported-tooling, or below-100 evidence are present.

  • Result: REQUEST_CHANGES

  • Reason: coverage-evidence result was failure, so required test/docstring evidence was not proven for current head dfea7b7ae6df7e0c480da823561b279e3cb332fc.

  • Head SHA: dfea7b7ae6df7e0c480da823561b279e3cb332fc

  • Workflow run: 32013942820

  • Workflow attempt: 1

Coverage evidence

Coverage evidence job did not run or did not publish coverage evidence.

Changed-File Evidence Map

flowchart LR
  PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
  Evidence --> S1["Changed file (19 files)"]
  S1 --> I1["repository behavior"]
  I1 --> R1["Review risk: Changed file (19 files)"]
  R1 --> V1["required checks"]
  Evidence --> S2["Docs: component-contract.md"]
  S2 --> I2["operator or user guidance"]
  I2 --> R2["Review risk: Docs: component-contract.md"]
  R2 --> V2["docs review"]
Loading

@opencode-agent

opencode-agent Bot commented Aug 17, 2026

Copy link
Copy Markdown
Contributor

OpenCode Review Overview

  • Head SHA: bc409e64db2d063e21b9cf5e7fc2c469f9e55a91
  • Workflow run: 32216758037
  • Workflow attempt: 1
  • Gate result: REQUEST_CHANGES (approval step)

Pull request overview

OpenCode cannot approve yet because required coverage evidence did not pass.

Review outcome

1. HIGH .github/workflows/opencode-review.yml:1 - Coverage evidence did not prove required test/docstring evidence

  • Problem: The required coverage-evidence job result was failure, so OpenCode cannot establish approval sufficiency for this head.

  • Root cause: Automated approval is only valid when the same-head coverage-evidence job proves supported repository test suites passed and configured docstring gates passed or were advisory, or reports not applicable because no supported source files or package manifests exist. Missing, failed, skipped, unavailable, or unsupported-tooling test evidence is a blocker.

  • Fix: Install or configure the repository test/docstring evidence tooling when source files or package manifests exist, rerun the current-head coverage-evidence job, and approve only after it reports success with required evidence or explicit no-source not-applicable evidence.

  • Regression test: Keep the approval branch checking needs.coverage-evidence.result == success before posting APPROVE, and publish REQUEST_CHANGES when coverage-evidence blocker states such as cancelled, skipped, failed, unsupported-tooling, or below-100 evidence are present.

  • Result: REQUEST_CHANGES

  • Reason: coverage-evidence result was failure, so required test/docstring evidence was not proven for current head bc409e64db2d063e21b9cf5e7fc2c469f9e55a91.

  • Head SHA: bc409e64db2d063e21b9cf5e7fc2c469f9e55a91

  • Workflow run: 32216758037

  • Workflow attempt: 1

Coverage evidence

Coverage evidence job did not run or did not publish coverage evidence.

Changed-File Evidence Map

flowchart LR
  PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
  Evidence --> S1["Changed file (23 files)"]
  S1 --> I1["repository behavior"]
  I1 --> R1["Review risk: Changed file (23 files)"]
  R1 --> V1["required checks"]
  Evidence --> S2["Docs: component-contract.md"]
  S2 --> I2["operator or user guidance"]
  I2 --> R2["Review risk: Docs: component-contract.md"]
  R2 --> V2["docs review"]
Loading

@opencode-agent opencode-agent Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

OpenCode cannot approve yet because required coverage evidence did not pass.

Review outcome

1. HIGH .github/workflows/opencode-review.yml:1 - Coverage evidence did not prove required test/docstring evidence

  • Problem: The required coverage-evidence job result was failure, so OpenCode cannot establish approval sufficiency for this head.

  • Root cause: Automated approval is only valid when the same-head coverage-evidence job proves supported repository test suites passed and configured docstring gates passed or were advisory, or reports not applicable because no supported source files or package manifests exist. Missing, failed, skipped, unavailable, or unsupported-tooling test evidence is a blocker.

  • Fix: Install or configure the repository test/docstring evidence tooling when source files or package manifests exist, rerun the current-head coverage-evidence job, and approve only after it reports success with required evidence or explicit no-source not-applicable evidence.

  • Regression test: Keep the approval branch checking needs.coverage-evidence.result == success before posting APPROVE, and publish REQUEST_CHANGES when coverage-evidence blocker states such as cancelled, skipped, failed, unsupported-tooling, or below-100 evidence are present.

  • Result: REQUEST_CHANGES

  • Reason: coverage-evidence result was failure, so required test/docstring evidence was not proven for current head 6a6c085d9b26a2275d047cc40eb050725384eeca.

  • Head SHA: 6a6c085d9b26a2275d047cc40eb050725384eeca

  • Workflow run: 32085816271

  • Workflow attempt: 1

Coverage evidence

Coverage evidence job did not run or did not publish coverage evidence.

Changed-File Evidence Map

flowchart LR
  PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
  Evidence --> S1["Changed file (20 files)"]
  S1 --> I1["repository behavior"]
  I1 --> R1["Review risk: Changed file (20 files)"]
  R1 --> V1["required checks"]
  Evidence --> S2["Docs: component-contract.md"]
  S2 --> I2["operator or user guidance"]
  I2 --> R2["Review risk: Docs: component-contract.md"]
  R2 --> V2["docs review"]
Loading

Copy link
Copy Markdown
Collaborator Author

@opencode-agent review

Please re-evaluate exact current head 6a6c085d9b26a2275d047cc40eb050725384eeca once under the repaired central control plane now on protected .github/main@092df969f71c7afc56dd9ab2662b016ad40696c8 via .github#1116. The latest OpenCode CHANGES_REQUESTED was published before that protected-main repair and failed at central coverage materialization. Do not reuse predecessor or infrastructure-failed evidence; keep inherited BandScope dependency-security failures separate from coverage/review semantics.

Copy link
Copy Markdown
Collaborator Author

@opencode-agent review

Exact-current-head review request for d43682078eb45383399550b9b64ce916047cb523 only. Read-only review: do not push or mutate the branch. Re-evaluate the current diff, resolved review threads, Storybook/runtime contract, accessibility behavior, and current Figma authority (OverlapWarningItem 254:81; contract frame 254:82, dark 254:85, light 254:96, NoClashes 254:107). Treat all predecessor-head evidence as stale. Use NVIDIA_NIM_API_KEY for any LLM execution; do not use COPILOT_GITHUB_TOKEN. Publish a formal current-head verdict only after exact-head evidence is verified.

This was referenced Aug 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: ui-ux Frontend, interaction, design, or user experience priority: medium Normal-priority or P2 work status: draft Draft pull request type: feature New or expanded product capability

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant